<template>
    <div class="header-nav change">
        <ul>
            <li><router-link to="/about">关于</router-link></li>
            <li><router-link to="/diary">日记</router-link></li>
            <li><router-link to="/message">留言</router-link></li>
            <li><router-link to="/article">博客</router-link></li>
            <li><router-link to="/">首页</router-link></li>
        </ul>
    </div>
</template>

<script>
import {mapState} from "vuex"
export default {
    computed:{
        ...mapState(["isShow"])
    },
    watch:{
        isShow(){
            let nav=document.querySelector(".header-nav")
            if(!this.isShow){
                nav.classList.add("change")
                console.log(this.isShow)
            }else{
                nav.classList.remove("change")
                console.log(this.isShow)
            }
        }
    }
}
</script>

<style lang="less" scoped>
.change{
        width:0 !important;
        height:0 !important;
        opacity: 0;
    }
.header-nav{
    box-sizing: border-box;
    padding: 0 10px 30px;
    position: absolute;
    z-index: 1001;
    width:100%;
    height:285px;
    background:white;
    transition: .5s;
    ul{
        li{
            position:relative;
            line-height: 50px;
            border-bottom: 1px solid #e8e9e7;
            text-indent: 50px;
            &:hover{
                cursor: pointer;
                color:#6bc30d;
                &::after{
                    width:100%;
                    height:3px;
                }
            }
            &::after{
            position: absolute;
            left:0;
            right:0;
            margin:auto;
            content:"";
            display: block;
            width:0;
            height:0;
            background:#6bc30d;
            transition: .3s;
        }
        }
    }
}
</style>